<template>
  <div>
    <div id="map_container">1231323</div>
  </div>
</template>

<script>
export default {
  name: "Visualization",
  methods: {
    init() {

      var map = initMap({
        tilt: 0,
        heading: 0,
        center: [105.348145, 37.976416],
        zoom: 5,
        style: purpleStyle
      });

      // 创建九段线
      var pt = new BMapGL.Point(130.943495, 22.781036);
      var myIcon = new BMapGL.Icon('gl/gl/examples/images/jiuduanxian.png', new BMapGL.Size(102, 150));
      var marker = new BMapGL.Marker(pt, {icon: myIcon, enableDragging: true});  // 创建标注
      map.addOverlay(marker);

      var view = new mapvgl.View({
        map: map
      });

      fetch('gl/gl/examples/data/chinalocation.json').then(rs => {
        return rs.json();
      }).then(rs => {
        console.log(rs)
        var data1 = [];
        var data2 = [];
        var data3 = [];
        for (var i = 0; i < rs[0].length; i++) {
          var geoCoord = rs[0][i].geoCoord;
          data1.push({
            geometry: {
              type: 'Point',
              coordinates: geoCoord
            },
            properties: {
              time: Math.random() * 100
            }
          });
        }

        for (var i = 0; i < rs[1].length; i++) {
          var geoCoord = rs[1][i].geoCoord;
          data2.push({
            geometry: {
              type: 'Point',
              coordinates: geoCoord
            },
            properties: {
              time: Math.random() * 10
            }
          });
        }

        for (var i = 0; i < rs[2].length; i++) {
          var geoCoord = rs[2][i].geoCoord;
          data3.push({
            geometry: {
              type: 'Point',
              coordinates: geoCoord
            },
            properties: {
              time: Math.random() * 10
            }
          });
        }

        view.addLayer(new mapvgl.PointLayer({
          blend: 'lighter',
          shape: 'circle',
          color: 'rgba(255, 77, 77, 0.8)', // 点图层1颜色
          data: data1,
          size: 1
        }));

        view.addLayer(new mapvgl.PointLayer({
          blend: 'lighter',
          shape: 'circle',
          color: 'rgba(255, 204, 0, 0.6)', // 点图层2颜色
          data: data2,
          size: 1.5
        }));

        view.addLayer(new mapvgl.PointLayer({
          blend: 'lighter',
          shape: 'circle',
          color: 'rgba(255, 255, 0, 0.6)', // 点图层3颜色
          data: data3,
          size: 2
        }));

        view.addLayer(new mapvgl.PointTripLayer({
          blend: 'lighter',
          shape: 'circle',
          startTime: 0,
          endTime: 100,
          step: 0.1,
          trailLength: 10,
          color: 'rgba(255, 255, 153, 0.5)', // 点动画图层颜色
          data: data1,
          size: 1.5
        }));

      });
    },
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped lang="less">
#map_container {
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  position: absolute;
  z-index: 9999;
}
</style>